pacificrimfandomcom-20200224-history
User blog:Pschycron/WikiText Basics for a Variety of Occasions
__TOC__ Introduction This is a blog dedicated to WikiText, which you can use via the Source editor to achieve a range of effects, for both official and personal use. WikiText refers to the programming language which runs this and every other wiki running the MediaWiki software. WikiText is essentially a watered down version of the HTML language that runs ALL webpages on the internet, in addition to many others that control other aspects like the visual style (CSS), functions (JavaScript) or direct site interfacing (PHP). Here, however, we focus exclusively on WikiText and how to use it to enhance pages on the wiki, always keeping in mind Manual of Style as to prevent convolution and unnecessary visual and internal modifications. That is to say, don't use this information to alter pages to suit your likes, seeing as this is a purely informative, objective and impersonal wiki that must remain consistent in both writing and visual aesthetic. You are, however, free to use this information on your own personal wikis, blogposts, talk pages, etc. As to promote inter-user interaction, the comments of this blog can be used as a type of personal sandbox, so to speak, for users to try out what they learn and either ask for help or make observations. With all that said, let's get started. Basic WikiText uses special characters to achieve certain effects, usually by having text between two of said characters. Most of these functions are rather basic and can be applied in the visual editor, such is the case with links, italics, bold text, etc. though, that being said, I believe they still deserve a small couple of paragraphs to explain. Italics and Bold Text In HTML, different variations of font are achieve by adding the font-variant: variant style modifier (see below). WikiText one-ups this by having a button in its visual editor format that does it for you: select the text, press the button, presto-change-o, you have yourself a different font type. That being said, it doesn't hurt to know how to apply these changes in the source editor if that's what you prefer using. Italics Italics are added in Source by having two apostrophes ( ' ) -and not quotation marks (")- each at the beginning and end of the text you want to italicise. Example: That's a spicy-a meatball! would render as: That's a spicy-a meatball! Keep in mind that bold and Italic text can overlap, so watch the number of times you use it, and as for all future cases, preview the page frequently. Bold Conversely, bold'ed text is added in Source by having three apostrophes ( ' ) -and, again, not quotation marks (")- each at the beginning and end of the text you want to embolden. Example: Nothing stops Da Boulder! would render as: Nothing stops Da Boulder! Mixing Keeping in mind the necessity to ensure the two don't overlap, one can indeed combine them by adding five apostrophes ( ' ) -and, once again, not quotation marks (")- each at the beginning and end of the text you want to... emboldicise(?). Example: I Hate Mondays! would render as: I Hate Mondays! ---- Objects or Elements WikiText, as previously stated, runs in a very similar manner to HTML, albeit altered slightly and with some elements removed for simplicity's sake. Objects (or Elements, if you prefer) are marked by tags, of which there are two to specifically define the element. The first of which (the "Opener") consist of a "less than" (<), after which comes the tag information which involves declaring the elementType (div, span, p, etc.), followed by the optional object-relevant "tagData", such as style information (which we shall touch on later), the ID of an object, etc. This tagData is added, after declaring the elementType, by stating the dataType, followed by an "equal" (=) sign and then the relevant information or data in between "quotation marks" (" "). IE: Opener: <elementType tagData> where tagData = [dataType="data"] Data types are often the same for different element types, but often have different effects depending on the element type in question. This data is also optional, as simply declaring the elementType will activate the tags effects, though this often defeats the purpose of the tag. The Opener is then closed by a "greater than" (>) without leaving a space between it and the closing "quotation mark" (") of the tagData. IE: Opener: <elementType dataType="data"> Following the Opener, one can write a string of text, which is the subject of the tagData in the Opener. One can also nest elements within each other to achieve specific effects. It is fully possible to have a within a within but abusing it can often lead to frustration should some minor mistake become buried in a sea of elements and data. For ease of explanation, we can call this information the "Middle". The "Middle" is entirely optional, but some elements are rendered entirely pointless by not having one. Now that you have your Opener tag, and your Middle if you need one, you must close your Object with a "Closer" tag, consisting of a "lesser than" (<), followed without a space by a "slash" (/). After the slash, again without a space, you must once again declare the elementType, followed once more without a space by a "greater than" (>). Failing to place a Closer will result in the entirety of the page following the Opener to be treated as the "Middle" of that elemnt, applying the effects to any regular text that is not altered by other elements. To prevent WikiText from working on a specific element, such as when you want to list a tag, you can use the "nowiki" elementType tag to prevent WikiText from acting on it. IE: <elementType tagData>middle nowiki prevents the tag from making changes to it's middle and making the tags visible in the finished page as <[tagData>middle. Now, let's get started on the different types of elements. A or "divided" element is one that exists as a separate object, that is to say, while it has similar properties to a , it has several others that differentiate it. s are generally used to create boxes and frames that are independent of a paragraph, unlike s that are dependent and alter the paragraph directly. IE: A paragraph with a in the middle of it creates a new paragraph that anchors to the right of the page. Usually this can be fixed by removing the "float" modifier, but that kinda defeats the purpose. = A , in contrast, is an inline element, meaning it is dependent on the paragraph and fits into it, serving primarily as a highlighting tool, for creating citations, etc. Considering a number of templates on the wiki already use it for a variety of purposes, it is still very versatile. A paragraph with a in the middle will not create a new paragraph, meaning it can be useful for things such as highlighting and emphasising among other things. = Element tagData Style The data for this dataType is arranged by, between the two "quotation marks" (" ") used to declare the data relating to said dataType, declaring a style modifier (a list of which will follow shortly), punctuated by a "colon" (:) without leaving a space between it and the last letter of the modifier; following the "colon" (:), leave a space between it and the following relevant modifierData (which will be included in the coming list). VisFunctions must always be separated via a "semicolon" (;) and a space, before another is added. IE: <elementType style="modifier: modifierData; modifier">middle Now for the promised list of modifiers, all of which will have s as examples as opposed to s or s for the sake of avoiding interference from other elements: color This defines the color of the elements' text. This modifier is also somewhat unique in that you must not place a space between the "colon" (:) at the end of it and it's modifierData. Syntax: <elementType style="color:color"</elementType> Where color is the desired color of the text within the element, declared by name or hex code. Example: <elementType style="color: red">middle would render as: middle text-shadow This modifier defines the color and size of the text shadow as well as it's direction. Syntax: <elementType style="text-shadow: A''' '''B C''' '''color">middle Where A''' and '''B are directional modifiers; declaring a value to them will cast the shadow in a specific direction: A''' is for up/down casting while '''B is for left/right casting. Lastly, C''' defines the shadow's width. '''color denotes the desired color in name or HTML hex code. Example: <elementType style="text-shadow: 0 0 5px red">middle would render as: middle border A modifier which defines the colour, width and style of the element's border in pixels. Syntax: <elementType style="border-'direction': A'''px '''type colour">middle Where direction refers to which part of the border is drawn and affected. The possible values for this modifier are "top", "left", "right" and "bottom". Multiple "border-" modifiers can be used within the same element as long as they have different direction values, while "border" can be used by itself to affect the whole border as one. A''' is the width of the border in pixels. '''type refers to the several different border styles that WikiText and HTML supports: *dotted - Defines a dotted border *dashed - Defines a dashed border *solid - Defines a solid border *double - Defines a double border *groove - Defines a 3D grooved border. The effect depends on the border's color value *ridge - Defines a 3D ridged border. The effect depends on the border's color value *inset - Defines a 3D inset border. The effect depends on the border's color value *outset - Defines a 3D outset border. The effect depends on the border's color value *none - Defines no border. *hidden - Defines a hidden border. color is the border's color value. As previously pointed out, some styles of border depend on this to work. To ensure the border doesn't overlap with the text or is too tightly bound to it, one can use the "padding" modifier explained later on. Example: elementType style="border: 1px solid red">middle would render as: middle border-radius This one defines the shape of the elements border. By default, it's a box, and is affected in different ways depending on whether you use pixels or percentages. Requires the border modifier. Syntax: <elementType style="border-radius: A'px/% ('B C''' '''D)">middle Where A''' is the amount the border is curved by. Using pixels will round the very edge of the border as thought it was being filed down by sandpaper, while using percentages rounds the entire corner of the border to make it into a bow shape. Additionally, 3 extra values can be added to achieve corner-specific rounding, so that '''A affects the upper left corner while B''' defines the upper right corner; '''C, the lower right and D''' the lower left. Example: <elementType style="padding: 5px; border: 1px solid red; border-radius: 10px 20% 30px 40%">middle would render as: middle width and height Here we have the modifiers that defines the maximum width and height an element can be before text wrap forces the text onto a new line. In pixels. Objects without this function will fit the width of the page naturally, and only be as tall as the text, starting from the first letter and the top of the text, respectively. The element will project downwards as the height value increases while zero or lower will cancel the effect. Syntax: <elementType style="width: 'A'px/%; height: 'B'px/%">middle Where '''A is the desired width and B', the desired height. In pixels, it declares the ''absolute width and height where, generally, 300+ is a good number to start from. However, percentages define the relative width and height of the element, starting from 100% and increasing or decreasing the higher or lower the value goes. Example: <elementType style="width: 100px; height: 300px">middle middle middle would render as: middle middle middle Note: This text appears to have just jumped to the next line as though a paragraph was created, and several more empty ones were added between it and the next line of text, but if we add a border... <elementType style="border: 2px solid blue; width: 100px; height: 300px">middle would render as: middle middle middle padding Defines the amount of space between the middle and the element's border, in both pixels and percentage. Fixes issues with the '''border modifier. Syntax: <elementType style="padding-'direction': A'''px/%">middle Where '''direction, like "border", is the specific part of the element being effected, the desired width of separation between the middle and the border in the given direction. As such, the possible values for it are "top", "bottom", "left" and right", while just "padding" affects all of them. A''' when used in pixels is the absolute separation, while percentiles are relative to the default value of 1. Example: <elementType style="padding: 10px">middle would render as: middle Note: Again, without a border, you can't see the difference: <elementType style="border: 2px solid blue; padding: 10px">middle would render as: middle font-size Defines the size of the text via a % modifier. 100% is the default, below that will make the text smaller, while values greater than 100 will make it larger. Syntax: <elementType style="font-size: 'A'px/%">middle Where '''A is the desired font size modification in pixels and percentiles for absolute and relative values, respectively. Example: <elementType style="font-size: 150%">middle would render as : middle text-align Defines the position of the text relative to the page borders. Left is the default value, whereas right would move the text to the opposite side and center would place it in the middle. Syntax: <elementType style="text-align: A'''">middle Where '''A is the desired font alignment, possible values being "right", "center" and "left". Example: <elementType style="text-align: right">middle would render as: middle <elementType style="text-align: center">middle would render as: middle <elementType style="text-align: left">middle would render as: middle (WIP) Category:Blog posts